import React from 'react';
import { Switch, Route, Redirect } from 'react-router-dom'
import { connect } from 'react-redux'
let Introduce = React.lazy(() => import('../views/introduce'))
let Dashboard = React.lazy(() => import('../views/dashboard'))
let Add = React.lazy(() => import('../views/add'))
let Swiper = React.lazy(() => import('../views/swiper'))

function Protect(props) {
  let { role, userRole, isLogin } = props;
  return <>
    {
      isLogin ?
        (role && !role.includes(userRole) ?
          <Redirect to='/404'></Redirect> :
          <Route {...props}></Route>) :
        <Redirect to='/login'></Redirect>
    }
  </>
}
Protect = connect(state => {
  return {
    userRole: state.user.role,
    isLogin: state.user.isLogin
  }
})(Protect)

class MyRoute extends React.Component {
  render() {
    return <div className='content_box'>
      <Switch>
        <Redirect path='/' exact to='/introduce'></Redirect>
        <Protect path='/introduce' component={Introduce} role={['user', 'admin', 'super']}></Protect>
        <Protect path='/dashboard' component={Dashboard} role={['user', 'admin', 'super']}></Protect>
        <Protect path='/add' component={Add} role={['super']}></Protect>
        <Protect path='/swiper' component={Swiper} role={['admin', 'super']}></Protect>
        <Redirect path='/*' to='/404'></Redirect>
      </Switch>
    </div>;
  }
}
export default MyRoute